<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= webpackConfig.name %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <div id="id-active"></div>
    <script>
      function queryURLParams(url, paramName) {
        // 正则表达式模式，用于匹配URL中的参数部分。正则表达式的含义是匹配不包含 ?、&、= 的字符作为参数名，之后是等号和不包含 & 的字符作为参数值
        let pattern = /([^?&=]+)=([^&]+)/g;
        let params = {};

        // match用于存储正则匹配的结果
        let match;
        // while 循环和正则表达式 exec 方法来迭代匹配URL中的参数
        while ((match = pattern.exec(url)) !== null) {
          // 在字符串url中循环匹配pattern，并对每个匹配项进行解码操作，将解码后的键和值分别存储在key和value变量中
          let key = decodeURIComponent(match[1]);
          let value = decodeURIComponent(match[2]);

          if (params[key]) {
            if (Array.isArray(params[key])) {
              params[key].push(value);
            } else {
              params[key] = [params[key], value];
            }
          } else {
            // 参数名在 params 对象中不存在，将该参数名和对应的值添加到 params 对象中
            params[key] = value;
          }
        }

        if (!paramName) {
          // 没有传入参数名称, 返回含有所有参数的对象params
          return params;
        } else {
          if (params[paramName]) {
            return params[paramName];
          } else {
            return "";
          }
        }
      }
      const getDomByHasId = (dom) => {
        if (dom && dom.id) {
          return dom;
        }
        if (dom.parentElement) {
          return getDomByHasId(dom.parentElement);
        }
        return null;
      };
      const getParentDomByClassName = (dom, className) => {
        if (dom && dom.classList.contains(className)) {
          return dom;
        }
        if (dom.parentElement) {
          return getParentDomByClassName(dom.parentElement, className);
        }
        return null;
      };
      const doActive = (dom, id) => {
        const client = dom.getBoundingClientRect();
        const active = document.querySelector("#id-active");
        active.classList.remove("id-active-down");
        active.style.width = client.width + "px";
        active.style.height = client.height + "px";
        active.style.left = client.x + "px";
        active.style.top = client.y + "px";
        active.style.display = "block";
        if (client.y < 40) {
          active.classList.add("id-active-down");
        }
        document
          .querySelector("html")
          .style.setProperty("--id-name", '"' + id + '"');
        window.addEventListener("scroll", () => {
          const client = dom.getBoundingClientRect();
          const active = document.querySelector("#id-active");
          active.style.width = client.width + "px";
          active.style.height = client.height + "px";
          active.style.left = client.x + "px";
          active.style.top = client.y + "px";
        });
        window.addEventListener("resize", () => {
          const client = dom.getBoundingClientRect();
          const active = document.querySelector("#id-active");
          active.style.width = client.width + "px";
          active.style.height = client.height + "px";
          active.style.left = client.x + "px";
          active.style.top = client.y + "px";
        });
        window.parent.postMessage(
          {
            type: "sendId",
            data: id,
          },
          "*"
        );
      };
      window.onload = () => {
        const flag = queryURLParams(window.location.href, "isComponent");
        const demoModeFlag = queryURLParams(window.location.href, "demoMode");

        // 防止编辑弹框时点击后弹窗默认行为导致消失

        const doId = (e) => {
          const idDom = getDomByHasId(e.target);
          if (idDom && idDom.id !== "app") {
            if (idDom.id.includes("rc-")) {
              return;
            }
            if (idDom.id.includes("panel-")) {
              return;
            }
            if (idDom.id.includes("_select_")) {
              return;
            }
            if (idDom.id.includes("vc")) {
              return;
            }
            doActive(idDom, idDom.id);
            return;
          }
        };
        // if (demoModeFlag || flag) {
        if (flag) {
          window.addEventListener(
            "click",
            (e) => {
              // 捕获阶段
              if (getParentDomByClassName(e.target, "ant-modal-close-x")) {
                e.stopPropagation();
                e.preventDefault();
                doId(e);
                return false;
              }
              if (getParentDomByClassName(e.target, "ant-modal-footer")) {
                e.stopPropagation();
                e.preventDefault();
                doId(e);
                return false;
              }
              if (e.target.classList.contains("ant-modal-wrap")) {
                e.stopPropagation();
                e.preventDefault();
                doId(e);
                return false;
              }
            },
            true
          );
        }

        if (flag) {
          window.addEventListener(
            "click",
            (e) => {
              // tab在冒泡阶段被阻止了 移动到捕获
              const tabDom = getParentDomByClassName(e.target, "ant-tabs");
              if (tabDom) {
                doActive(tabDom, "tabs");
                return;
              }
            },
            true
          );
        }

        if (flag) {
          window.addEventListener(
            "click",
            (e) => {
              // if (e.target.tagName.toUpperCase() === 'IMG') {
              //   doActive(e.target, 'img')
              //   return;
              // }

              const dom = getParentDomByClassName(e.target, "ant-picker");
              // 特殊处理 date-picker
              if (dom) {
                const id = dom.querySelector("[id]")?.id;
                id && doActive(dom, id);
                e.stopPropagation();
                e.preventDefault();
                return;
              }
              const idDom = getDomByHasId(e.target);
              if (idDom && idDom.id !== "app") {
                if (idDom.id.includes("rc-")) {
                  e.stopPropagation();
                  e.preventDefault();
                  return;
                }
                if (idDom.id.includes("panel-")) {
                  e.stopPropagation();
                  e.preventDefault();
                  return;
                }
                if (idDom.id.includes("_select_")) {
                  e.stopPropagation();
                  e.preventDefault();
                  return;
                }
                if (idDom.id.includes("vc")) {
                  e.stopPropagation();
                  e.preventDefault();
                  return;
                }
                doActive(idDom, idDom.id);
                e.stopPropagation();
                e.preventDefault();
                return;
              }
              const modalDom = document.querySelector(".ant-modal");
              if (modalDom) {
                doActive(modalDom, "a-modal");
                e.stopPropagation();
                e.preventDefault();
                return;
              }
            },
            true
          );
        }
        const style = document.querySelector("#demo-mode-style");
        if (!demoModeFlag && style) {
          style.innerHTML = "";
        }
      };
    </script>
    <style id="demo-mode-style">
      ::-webkit-resizer {
        background-color: transparent;
      }

      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      ::-webkit-scrollbar-button {
        display: none;
      }

      ::-webkit-scrollbar-corner {
        background: transparent;
      }

      ::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        background-color: #c0c2c4;
        border-radius: 9px;
        background-clip: content-box;
      }

      ::-webkit-scrollbar-track {
        background: transparent;
      }

      /* .app-container {
      position: relative;
    } */
      #id-active {
        display: none;
        position: fixed;
        border: 4px dashed rgb(52, 115, 244) !important;
        background: rgba(52, 115, 244, 0.45);
        /* pointer-events: none; */
        box-sizing: border-box;
        z-index: 1111111111;
        pointer-events: none;
      }

      .id-active {
        position: relative;
      }

      #id-active::after {
        content: var(--id-name, "组件ID / name");
        position: absolute;
        z-index: 3333333333333;
        top: -40px;
        left: -4px;
        width: fit-content;
        padding: 0 14px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        white-space: nowrap;
        word-wrap: nowrap;
        background: rgba(52, 115, 244);
        pointer-events: none;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        color: #fff;
        box-sizing: border-box;
      }

      .id-active-down::after {
        top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
      }

      /* 下拉框id兼容 */
      .ant-select-selector {
        position: relative;
      }

      .ant-select-selection-search {
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
      }

      .ant-select-selection-search-input {
        position: absolute;
        z-index: 1000;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
    </style>
    <!-- built files will be auto injected -->
  </body>
</html>
